<template>
    <div v-if="formState !== 'hidden'">
        <div class="container">
            <div class="container_title">基础信息</div>
            <div class="container_content">
                <FormItems
                    v-model="infoData"
                    :form="formList"
                    labelWidth="100px"
                    :column="3"
                    :state="formState"
                >
                </FormItems>
                <!-- state="readonly" -->
            </div>
        </div>
    </div>
</template>
<script>
import FormItems from "@/views/finance/manage/formItems/index.vue";
export default {
    name: "info",
    props: {
        value: {
            default: {},
        },
        state: {
            default: "write",
        },
        formStatus: {
            required: false,
        },
    },
    components: { FormItems },
    data() {
        return {
            formList: [],
            dicts: {
                // 收款人类型
                payeeTypeList: [
                    {
                        label: "员工",
                        value: "1",
                    },
                    {
                        label: "司机",
                        value: "2",
                    },
                    {
                        label: "供应商",
                        value: "3",
                    },
                ],
                contractTypeList: [
                    {
                        label: "短租",
                        value: "1",
                    },
                    {
                        label: "渠道",
                        value: "2",
                    },
                    {
                        label: "自营",
                        value: "3",
                    },
                    {
                        label: "代收代付",
                        value: "4",
                    },
                ],
                needpayType: [
                    {
                        label: "是",
                        value: "1",
                    },
                    {
                        label: "否",
                        value: "2",
                    },
                ],
                BusinessType: [],
            },
        };
    },

    computed: {
        infoData: {
            get() {
                return this.value;
            },
            set(value) {
                this.$emit("input", value);
            },
        },

        formState: {
            get() {
                let state = "write";
                if (Reflect.has(this, "formStatus")) {
                    switch (this?.formStatus?.toString()) {
                        case "0":
                            state = "write";
                            break;
                        case "1":
                            state = "disabled";
                            break;
                        case "2":
                            state = "hidden";
                            break;
                        default:
                            state = this.state;
                            break;
                    }
                }
                return state;
            },
        },
    },
    watch: {
        infoData: {
            handler(val) {
                // this.formatValue();
            },
            deep: true,
        },
    },
    mounted() {
        this.initInfo();
    },

    methods: {
        formatValue() {
            if (typeof this.infoData.contractType == "string") {
                let contractType =
                    this.infoData?.contractType?.split?.(",") ?? [];
                this.$set(this.infoData, "contractType", contractType);
            }
        },
        initInfo() {
            this.formList = [
                {
                    label: "申请人",
                    type: "input",
                    prop: "applyUserName",
                },
                {
                    label: "申请人组织",
                    type: "input",
                    prop: "applyDeptName",
                },
                // {
                //     label: "城市",
                //     type: "input",
                //     prop: "companyId",
                // },
                {
                    label: "所属月份",
                    type: "input",
                    prop: "payTime",
                },
                {
                    label: "合同",
                    type: "input",
                    prop: "contractType",
                    format: (row) => {
                        let word = "-";
                        let item = this.dicts.contractTypeList.find(
                            (item) => item.value == row.contractType
                        );
                        item && (word = item.label);
                        return word;
                    },
                },
                {
                    label: "申请时间",
                    type: "input",
                    prop: "createTime",
                    format: (row) => {
                        return this._formatTime(row?.createTime, 0);
                    },
                },
                {
                    label: "收款人类型",
                    type: "input",
                    prop: "payeeType",
                    format: (row) => {
                        let word = "-";
                        let item = this.dicts.payeeTypeList.find(
                            (item) => item.value == row.payeeType
                        );
                        item && (word = item.label);
                        return word;
                    },
                },
                {
                    label: "收款人",
                    type: "input",
                    prop: "payeeUserName",
                },
                {
                    label: "收款账户名称",
                    type: "input",
                    prop: "paymentAccount",
                },
                {
                    label: "收款卡号",
                    type: "input",
                    prop: "paymentCardId",
                },
            ];
        },
    },
};
</script>
<style lang="scss" scoped>
.container {
    border-radius: 10px;
    background-color: #fff;
    // margin: 20px;
    padding: 20px;
    .container_title {
        margin-bottom: 30px;
        border-bottom: 1px solid #e9e9e9;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        padding-bottom: 15px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        text-align: left;
        font-style: normal;
    }
    .container_content {
        // padding: 2rem;
    }
}
.chunk_nav {
    background-color: #fff;
    // padding: 2rem 0;
    .nav_item {
        padding-bottom: 30px;
        display: flex;
        .label {
            min-width: 0;
            width: 250px;
            text-align: right;
            padding-right: 25px;
            box-sizing: border-box;
        }
        .content {
            flex: 1;
            min-width: 0;
            padding-right: 50px;
            .menu {
                width: 100%;
                display: grid;
                grid-template-columns: repeat(6, minmax(0, 1fr));
                gap: 5px 0;
            }
        }
    }
}
.chunk_contentBox {
    background-color: #fff;
    // padding: 2.5rem;
    .chunk {
        margin-bottom: 50px;
    }
}
NaNpxakeBox {
    display: flex;
    margin-bottom: 20px;
    .label {
        font-size: 14px;
        margin-right: 15px;
    }
    .content {
        width: 370px;
    }
}
.handleBox {
    display: flex;
    justify-content: center;
}
::v-deep .gridBox {
    padding-top: 0;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(100px);
    opacity: 0;
}

.component-fade-enter-active,
.component-fade-leave-active {
    transition: all 0.8s;
}
</style>
